<template>
  <div class="vertical-options-render" :class="getIndentClass(fieldData.alignment)" :style="{ fontSize: getFontSize() }">
    <!-- 字段名称 -->
    <div class="field-name-container">
      <span v-if="fieldData.prefixSymbol && fieldData.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <span 
        v-if="fieldData.fieldName && fieldData.fieldName.trim()"
        class="field-name-text" 
        :class="{ 'bold-text': fieldData.isBold }"
      >
        {{ fieldData.fieldName }}
      </span>
    </div>
    
    <!-- 选项列表 - 垂直排列 -->
    <div class="options-list">
      <div 
        v-for="option in fieldData.options" 
        :key="option.id"
        class="option-item"
      >
        <!-- 选项复选框样式 -->
        <span class="checkbox-mark">☐</span>
        
        <!-- 选项内容 -->
        <span class="option-text">{{ option.text || '选项' }}</span>
        
        <!-- 横线 -->
        <span v-if="option.showLine" class="option-line" :style="{ width: getLineWidth(option.lineLength) }"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    required: true
  }
})

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取横线宽度
const getLineWidth = (length) => {
  return `${(length || 10) * 8}px`
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀'
  }
  return symbolMap[props.fieldData.prefixSymbol] || ''
}

// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData.fontSize] || '10.5pt'
}
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.vertical-options-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  .options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 20px;
    
    .option-item {
      display: flex;
      align-items: center;
      gap: 4px;
      .checkbox-mark { width: 16px; height: 16px; line-height: 16px; text-align: center; font-family: sans-serif; font-size: 21px; }
      
      .option-text {
        /* 继承与横向组件一致的字体与颜色 */
        white-space: nowrap;
      }
    }
  }
}
</style> 